/**
 * EventFlow Public Search and Filters
 */

.eventflow-filters {
    background: var(--eventflow-color-surface-alt);
    border: 1px solid var(--eventflow-color-border);
    border-radius: var(--eventflow-radius-lg);
    margin-bottom: var(--eventflow-space-7);
    padding: var(--eventflow-space-5);
}

.eventflow-filters__heading {
    align-items: flex-start;
    display: flex;
    gap: var(--eventflow-space-4);
    justify-content: space-between;
    margin-bottom: var(--eventflow-space-5);
}

.eventflow-filters__heading h2 {
    font: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.eventflow-filters__eyebrow {
    color: var(--eventflow-color-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 var(--eventflow-space-1);
    text-transform: uppercase;
}

.eventflow-filters__clear,
.eventflow-empty-state__clear {
    color: var(--eventflow-color-primary);
    font-weight: 700;
    text-decoration: none;
}

.eventflow-filters__clear:hover,
.eventflow-empty-state__clear:hover {
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.eventflow-filters__form {
    align-items: end;
    display: grid;
    gap: var(--eventflow-space-4);
    grid-template-columns:
        minmax(16rem, 2fr)
        minmax(11rem, 1fr)
        minmax(12rem, 1fr)
        auto;
}

.eventflow-filters__field {
    min-width: 0;
}

.eventflow-filters__field label {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: var(--eventflow-space-2);
}

.eventflow-filters__field input,
.eventflow-filters__field select {
    appearance: none;
    background: var(--eventflow-color-surface);
    border: 1px solid var(--eventflow-color-border);
    border-radius: var(--eventflow-radius-sm);
    color: var(--eventflow-color-text);
    font: inherit;
    height: 3rem;
    line-height: 1.2;
    margin: 0;
    padding: 0 0.9rem;
    width: 100%;
}

.eventflow-filters__field select {
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1rem) 1.25rem,
        calc(100% - 0.7rem) 1.25rem;
    background-repeat: no-repeat;
    background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
    padding-right: 2.4rem;
}

.eventflow-filters__field input:focus,
.eventflow-filters__field select:focus,
.eventflow-filters__actions button:focus-visible,
.eventflow-filters__clear:focus-visible,
.eventflow-empty-state__clear:focus-visible {
    outline: 3px solid var(--eventflow-color-primary);
    outline-offset: 2px;
}

.eventflow-filters__actions button {
    background: var(--eventflow-color-primary);
    border: 1px solid var(--eventflow-color-primary);
    border-radius: var(--eventflow-radius-sm);
    color: var(--eventflow-color-primary-contrast);
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    height: 3rem;
    padding: 0 1.2rem;
    white-space: nowrap;
}

.eventflow-filters__actions button:hover {
    filter: brightness(0.95);
}

.eventflow-filters__status {
    color: var(--eventflow-color-muted);
    font-size: 0.875rem;
    margin: var(--eventflow-space-3) 0 0;
    min-height: 1.25rem;
}

@media (max-width: 1023px) {
    .eventflow-filters__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eventflow-filters__field--search {
        grid-column: 1 / -1;
    }

    .eventflow-filters__actions {
        align-self: end;
    }

    .eventflow-filters__actions button {
        width: 100%;
    }
}

@media (max-width: 639px) {
    .eventflow-filters {
        padding: var(--eventflow-space-4);
    }

    .eventflow-filters__heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .eventflow-filters__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .eventflow-filters__field--search {
        grid-column: auto;
    }
}

/* EF-FE.003A.2A — Filter Layout Polish */

.eventflow-filters__form {
    align-items: end;
    display: grid;
    gap: 0.9rem;
    grid-template-columns:
        minmax(220px, 1.6fr)
        repeat(3, minmax(150px, 0.85fr))
        auto;
}

.eventflow-filters__field {
    min-width: 0;
}

.eventflow-filters__field input,
.eventflow-filters__field select {
    min-height: 2.85rem;
    width: 100%;
}

.eventflow-filters__actions button {
    min-height: 2.85rem;
    white-space: nowrap;
}

@media (max-width: 1100px) {
    .eventflow-filters__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eventflow-filters__field--search,
    .eventflow-filters__actions {
        grid-column: 1 / -1;
    }

    .eventflow-filters__actions button {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .eventflow-filters__form {
        grid-template-columns: 1fr;
    }

    .eventflow-filters__field--search,
    .eventflow-filters__actions {
        grid-column: auto;
    }
}

/* /EF-FE.003A.2A */

/* EF-FE.003A.2H — Filter Layout Repair */

.eventflow-filters {
    box-sizing: border-box;
    max-width: 1144px;
    width: calc(100vw - 48px);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.eventflow-filters__form {
    align-items: end;
    display: grid;
    gap: 0.9rem;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        minmax(0, 1fr)
        auto;
    width: 100%;
}

.eventflow-filters__field,
.eventflow-filters__actions {
    box-sizing: border-box;
    min-width: 0;
}

.eventflow-filters__field input,
.eventflow-filters__field select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.eventflow-filters__actions {
    align-self: end;
}

.eventflow-filters__actions button {
    min-width: 0;
    padding-inline: 1.25rem;
    width: auto;
}

@media (max-width: 1023px) {
    .eventflow-filters {
        width: calc(100vw - 36px);
    }

    .eventflow-filters__form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .eventflow-filters__field--search {
        grid-column: 1 / -1;
    }

    .eventflow-filters__actions {
        grid-column: 1 / -1;
    }

    .eventflow-filters__actions button {
        width: 100%;
    }
}

@media (max-width: 639px) {
    .eventflow-filters {
        width: calc(100vw - 24px);
    }

    .eventflow-filters__form {
        grid-template-columns: minmax(0, 1fr);
    }

    .eventflow-filters__field--search,
    .eventflow-filters__actions {
        grid-column: auto;
    }
}

/* /EF-FE.003A.2H */

/* EF-FE.003A.2I — Center Filter Card */

.eventflow-filters {
    left: auto;
    right: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
    width: min(1144px, calc(100vw - 48px));
}

@media (max-width: 1023px) {
    .eventflow-filters {
        width: min(1144px, calc(100vw - 36px));
    }
}

@media (max-width: 639px) {
    .eventflow-filters {
        width: calc(100vw - 24px);
    }
}

/* /EF-FE.003A.2I */

/* EF-FE.003A.3C — Viewport Alignment Fix */

.eventflow-filters {
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    max-width: none !important;

    width: min(1144px, calc(100vw - 48px)) !important;

    margin-left:
        calc(
            50% - 50vw
            + (
                100vw
                - min(1144px, calc(100vw - 48px))
            ) / 2
        ) !important;

    margin-right: 0 !important;
}

@media (max-width: 1023px) {
    .eventflow-filters {
        width: min(1144px, calc(100vw - 36px)) !important;

        margin-left:
            calc(
                50% - 50vw
                + (
                    100vw
                    - min(1144px, calc(100vw - 36px))
                ) / 2
            ) !important;
    }
}

@media (max-width: 639px) {
    .eventflow-filters {
        width: calc(100vw - 24px) !important;

        margin-left:
            calc(
                50% - 50vw + 12px
            ) !important;
    }
}

/* /EF-FE.003A.3C */

/* ==================================================
   EF-101C.3B.1 — Designer Search + Filter Tokens
   ================================================== */

.eventflow-filters {
    background:
        var(
            --eventflow-filter-container-background,
            #f8fafc
        ) !important;

    border-color:
        var(
            --eventflow-filter-container-border,
            #e4e7ec
        ) !important;

    border-radius:
        var(
            --eventflow-filter-container-radius,
            16px
        ) !important;

    border-width:
        var(
            --eventflow-filter-container-border-width,
            1px
        ) !important;

    box-shadow:
        var(
            --eventflow-filter-container-shadow,
            none
        ) !important;

    margin-bottom:
        var(
            --eventflow-filter-container-margin-bottom,
            32px
        ) !important;

    padding:
        var(
            --eventflow-filter-container-padding,
            24px
        ) !important;
}

.eventflow-filters__heading h2 {
    color:
        var(
            --eventflow-filter-heading-color,
            #101828
        ) !important;

    font-size:
        var(
            --eventflow-filter-heading-size,
            20px
        ) !important;
}

.eventflow-filters__eyebrow {
    color:
        var(
            --eventflow-filter-eyebrow-color,
            #667085
        ) !important;
}

.eventflow-filters__field label {
    color:
        var(
            --eventflow-filter-label-color,
            #101828
        ) !important;

    font-size:
        var(
            --eventflow-filter-label-size,
            14px
        ) !important;

    font-weight:
        var(
            --eventflow-filter-label-weight,
            700
        ) !important;
}

.eventflow-filters__form {
    gap:
        var(
            --eventflow-filter-row-gap,
            14px
        ) !important;
}

.eventflow-filters__field input {
    background:
        var(
            --eventflow-filter-input-background,
            #ffffff
        ) !important;

    border-color:
        var(
            --eventflow-filter-input-border,
            #e4e7ec
        ) !important;

    border-radius:
        var(
            --eventflow-filter-input-radius,
            6px
        ) !important;

    border-width:
        var(
            --eventflow-filter-input-border-width,
            1px
        ) !important;

    color:
        var(
            --eventflow-filter-input-text,
            #101828
        ) !important;

    box-sizing: border-box !important;

    height:
        var(
            --eventflow-filter-input-height,
            48px
        ) !important;

    padding:
        var(
            --eventflow-filter-input-padding,
            0 14px
        ) !important;
}

.eventflow-filters__field input::placeholder {
    color:
        var(
            --eventflow-filter-input-placeholder,
            #667085
        ) !important;
}

.eventflow-filters__field select {
    background-color:
        var(
            --eventflow-filter-select-background,
            #ffffff
        ) !important;

    border-color:
        var(
            --eventflow-filter-select-border,
            #e4e7ec
        ) !important;

    border-radius:
        var(
            --eventflow-filter-select-radius,
            6px
        ) !important;

    color:
        var(
            --eventflow-filter-select-text,
            #101828
        ) !important;

    box-sizing: border-box !important;

    height:
        var(
            --eventflow-filter-select-height,
            48px
        ) !important;
}

.eventflow-filters__field input:focus,
.eventflow-filters__field select:focus {
    border-color:
        var(
            --eventflow-filter-focus-color,
            #175cd3
        ) !important;

    outline:
        2px solid
        color-mix(
            in srgb,
            var(
                --eventflow-filter-focus-color,
                #175cd3
            )
            18%,
            transparent
        ) !important;

    outline-offset: 1px !important;
}

.eventflow-filters__actions button {
    background:
        var(
            --eventflow-filter-button-background,
            #175cd3
        ) !important;

    border-radius:
        var(
            --eventflow-filter-button-radius,
            6px
        ) !important;

    box-shadow:
        var(
            --eventflow-filter-button-shadow,
            none
        ) !important;

    color:
        var(
            --eventflow-filter-button-text,
            #ffffff
        ) !important;

    box-sizing: border-box !important;

    height:
        var(
            --eventflow-filter-button-height,
            48px
        ) !important;
}

.eventflow-filters__actions button:hover {
    background:
        var(
            --eventflow-filter-button-hover,
            #1552bc
        ) !important;
}

.eventflow-filters__clear {
    color:
        var(
            --eventflow-filter-clear-color,
            #175cd3
        ) !important;
}

.eventflow-filters__status {
    color:
        var(
            --eventflow-filter-status-color,
            #667085
        ) !important;

    font-size:
        var(
            --eventflow-filter-status-size,
            14px
        ) !important;
}

@media (max-width: 760px) {
    .eventflow-filters__form {
        gap:
            var(
                --eventflow-filter-mobile-gap,
                14px
            ) !important;
    }
}

/* /EF-101C.3B.1 */

/* ==================================================
   EF-101C.3B.1R — Filter Height Contract
   Designer Height values are authoritative heights.
   ================================================== */

/* /EF-101C.3B.1R */