/* Mobile Filter Styles */

/* Hide trigger on desktop */
.mobile-filter-trigger {
    display: none;
}

/* Default state for modal wrapper (desktop: behave normally) */
.mobile-filter-modal-wrapper {
    /* No special styles on desktop */
}

.mobile-filter-header,
.mobile-filter-footer-actions {
    display: none;
    /* Hidden on desktop */
}

/* Mobile Styles */
@media screen and (max-width: 600px) {

    /* Sticky Floating Trigger Button */
    .mobile-filter-trigger {
        display: block;
        position: fixed;
        bottom: 20px;
        /* Floating above bottom */
        left: 50%;
        transform: translateX(-50%);
        /* Center horizontally */
        width: auto;
        /* Width auto */
        z-index: 9990;
        padding: 0;
        background: transparent;
        pointer-events: none;
        /* Let clicks pass through container if needed, but button needs events */
    }

    .mobile-filter-trigger button {
        pointer-events: auto;
        /* Re-enable pointer events for button */
        width: auto;
        min-width: 150px;
        /* Minimum width */
        background-color: #111;
        /* Dark background */
        color: #fff;
        border: none;
        padding: 12px 30px;
        /* Padding for pill shape */
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 4px;
        /* Slightly rounded as per screenshot, or 50px for pill? Screenshot looks like standard rounded rect */
        cursor: pointer;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        /* Shadow for floating effect */
    }

    /* Modal Styling - Only apply when open or by default hidden/transformed */
    .mobile-filter-modal-wrapper {
        display: none;
        /* Hidden by default on mobile unless active */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        /* Full viewport height */
        background: #fff !important;
        z-index: 99999;
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }

    .mobile-filter-modal-wrapper.is-open {
        display: block;
        background: #fff !important;
    }

    .em-search-town .selectize-dropdown-content {
        display: block;
    }

    .mobile-filter-label {
        font-size: 18px;
        font-weight: 600;
    }

    /* Prevent body scroll when modal is open */
    body.modal-open {
        overflow: hidden;
    }

    /* Modal Header */
    .mobile-filter-header {
        display: flex;
        justify-content: center;
        /* Center title */
        align-items: center;
        position: relative;
        margin-bottom: 20px;
        padding-bottom: 10px;
        background: #fff;
        /* Ensure it's white */
        /* border-bottom: 1px solid #eee; */
    }

    .mobile-filter-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
    }

    .mobile-filter-close {
        position: absolute;
        left: 0;
        /* X on the left based on screenshot? Or right? Screenshot shows X on Left */
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        font-size: 26px;
        /* Increased from 24px */
        line-height: 1;
        padding: 5px;
        cursor: pointer;
        color: #000;
        /* Ensure visibility */
    }

    /* Form and Inputs Styling */
    .em-search-form {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Increased gap for better separation */
    }

    /* Target specific EM fields if possible, or general inputs */
    .em-search-form input[type="text"],
    .em-search-form input[type="date"],
    .em-search-form select {
        width: 100%;
        padding: 12px;
        border: 1px solid #eee;
        /* Light border */
        border-radius: 4px;
        background-color: #fff;
        font-size: 14px;
        color: #333;
    }

    /* Fix for Calendar Icon Positioning */
    .em-search-field {
        position: relative;
        /* Contain absolute children */
    }

    /* Target standard datepicker trigger images or icons */
    .em-search-scope img,
    .em-search-scope .ui-datepicker-trigger,
    .em-search-scope .flatpickr-calendar-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        /* Restrict size */
        height: auto;
        pointer-events: auto;
        /* Ensure clickable */
        z-index: 10;
        margin: 0 !important;
        /* Reset any default margins */
        display: block !important;
        /* Ensure visible */
        /* If it was floating elsewhere, this pulls it back into the relative container */
    }

    /* 2-Column Layout for Categories and Tags Checkboxes (if not select2) */
    /* Assuming Events Manager defaults to checkboxes or we can target the selectize container */

    /* If EM uses standard checkboxes for categories/tags: */
    .em-search-category .checkboxes,
    .em-search-tag .checkboxes {
        /* display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px; */
    }

    /* If EM uses Selectize (which implies a dropdown), we can't easily make it 2-column always visible. 
       But user says "click value for category will be two into raw". 
       Implies they might be expanding the dropdown or it's a list of checkboxes. 
       Let's assume standard EM might output checkboxes if not "multiselect" style? 
       Or maybe they want the dropdown items to be 2-column? 
       Let's try to target the selectize dropdown content if present. */

    .selectize-dropdown-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .selectize-dropdown-content .option {
        font-size: 12px;
        /* 2px smaller */
        padding: 5px;
    }

    /* Specific headers for sections if they don't have them */
    .em-search-field label {
        display: block;
        margin-bottom: 5px;
        font-weight: 600;
        font-size: 14px;
    }

    /* Hide the default search button inside the form, we use our "Show results" */
    .em-search-submit {
        display: none;
    }

    /* Footer Actions ("Show results") */
    .mobile-filter-footer-actions {
        display: block;
        margin-top: 20px;
        padding-bottom: 20px;
        /* Extra space for scrolling */
    }

    .mobile-show-results {
        width: 100%;
        background-color: #111;
        color: #fff;
        padding: 15px;
        border: none;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        display: block;
        margin-bottom: 20px;
        /* Space at bottom */
    }

    .em.em-search.size-small .hide-small {
        display: block !important;
        visibility: visible !important;
    }
}