/* Desktop Filter Styles (Events page sidebar)
   Accordion-style filter inspired by art-xp.com, using the site's own fonts/colours.
   Mobile (<= 600px) keeps the existing modal design from mobile-filter.css. */

/* ---------- All screen sizes ---------- */

/* Wrapping the fields makes the Type/Medium fields ":first-child", which pulls in the
   theme's scrollable list rule (max-height 384px + overflow). Neutralise it everywhere. */
.dl-filter-body > .em-search-category,
.dl-filter-body > .em-search-tag,
.size-small .dl-filter-body > .em-search-category,
.size-small .dl-filter-body > .em-search-tag {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
}

/* ---------- Mobile: keep the existing layout exactly as before ---------- */
@media screen and (max-width: 600px) {
    /* Wrappers are layout-neutral, so labels/fields stay direct flex items of the form */
    .dl-filter-section,
    .dl-filter-body {
        display: contents;
    }

    .dl-filter-head,
    .dl-filter-chips,
    .dl-filter-count,
    .dl-show-more {
        display: none !important;
    }
}

/* ---------- Desktop ---------- */
@media screen and (min-width: 601px) {

    /* Header: "Filters" + "Clear all" */
    .dl-filter-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin: 0 0 14px;
    }

    .dl-filter-head__title {
        font-size: 18px;
        font-weight: 600;
        color: #111;
    }

    .dl-filter-clear {
        background: none;
        border: 0;
        padding: 0;
        font: inherit;
        font-size: 13px;
        color: #8a8f94;
        text-decoration: underline;
        cursor: pointer;
    }

    .dl-filter-clear:hover {
        color: #111;
    }

    /* Active filter chips */
    .dl-filter-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0 0 16px;
    }

    .dl-filter-chips:empty {
        display: none;
    }

    .dl-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f4f4f4;
        border-radius: 999px;
        padding: 5px 10px;
        font-size: 12px;
        font-weight: 500;
        color: #111;
        line-height: 1.3;
    }

    .dl-chip__remove {
        background: none;
        border: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1;
        color: #555;
        cursor: pointer;
    }

    .dl-chip__remove:hover {
        color: #111;
    }

    /* Sections with thin dividers */
    .dl-filter-section {
        border-bottom: 1px solid #ececec;
        padding: 16px 0;
    }

    .dl-filter-section--city {
        border-top: 1px solid #ececec;
    }

    /* City placeholder ("Select City"): 2px smaller than the field text */
    .mobile-filter-modal-wrapper .em-search-town .selectize-input input::placeholder {
        font-size: calc(1em - 2px);
    }

    .dl-filter-section .mobile-filter-label {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #111;
        margin: 0 0 12px;
    }

    /* Accordion toggles (Type / Medium) */
    .dl-filter-toggle {
        cursor: pointer;
        user-select: none;
        margin: 0 !important;
    }

    .dl-filter-toggle::after {
        content: "";
        margin-left: auto;
        width: 8px;
        height: 8px;
        border-right: 1.5px solid #111;
        border-bottom: 1.5px solid #111;
        transform: rotate(-45deg);
        transition: transform .2s;
    }

    .dl-filter-section.dl-is-open .dl-filter-toggle::after {
        transform: rotate(45deg);
    }

    .dl-filter-toggle:focus-visible {
        outline: 2px solid #111;
        outline-offset: 4px;
    }

    .dl-filter-count {
        font-size: 12px;
        font-weight: 500;
        color: #8a8f94;
        margin-left: 6px;
    }

    .dl-filter-section--toggle .dl-filter-body {
        display: none;
        margin-top: 12px;
    }

    .dl-filter-section--toggle.dl-is-open .dl-filter-body {
        display: block;
    }

    /* Checkbox lists: no scrollbars, compact rows */
    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown,
    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown-content {
        max-height: none !important;
        overflow: visible !important;
    }

    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown .option {
        margin: 0 !important;
        padding: 5px 0 5px 28px !important;
        min-height: 0 !important;
        line-height: 20px;
        font-size: 14px;
        color: #8a8f94 !important;
    }

    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown .option:hover {
        color: #111 !important;
    }

    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown .option.selected {
        color: #111 !important;
        font-weight: 600;
    }

    /* Small square checkbox */
    .mobile-filter-modal-wrapper .dl-filter-section .selectize-dropdown .option > span:first-child {
        width: 18px !important;
        height: 18px !important;
        top: 6px !important;
        border: 1px solid #d9dde0 !important;
        border-radius: 3px !important;
    }

    /* Medium: show the first 6 options, "Show more" reveals the rest (no scrollbar) */
    .mobile-filter-modal-wrapper .dl-filter-section.dl-is-collapsed .selectize-dropdown-content {
        max-height: 180px !important; /* 6 rows x 30px */
        overflow: hidden !important;
    }

    .dl-show-more {
        background: none;
        border: 0;
        padding: 8px 0 0;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        color: #111;
        text-decoration: underline;
        cursor: pointer;
    }

    .dl-show-more[hidden] {
        display: none;
    }
}