/**
 * Event type chip dropdown, between Where and Attendees on the /venues toolbar.
 * Checkbox rows come from the shared listing-sidebar checkbox styles; this file only
 * adds the search box and keeps the 24-option list scrollable inside the panel.
 */

.filter-toolbar__event-type__search {
    position: relative;
    padding: 0 0 12px;
}

.filter-toolbar__event-type__search-input {
    width: 100%;
    height: 40px;
    padding: 0 12px 0 36px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-size: 14px;
    color: #1A1A1A;
    background: #FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 12px center;
    outline: none;
}

.filter-toolbar__event-type__search-input:focus {
    border-color: #1A1A1A;
}

.filter-toolbar__event-type__search-input::placeholder {
    color: #999;
}

.filter-toolbar__event-type__list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

.filter-toolbar__event-type__option[hidden] {
    display: none;
}

.filter-toolbar__event-type__empty {
    margin: 0;
    padding: 16px 4px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* Mobile bottom sheet: let the list use the taller panel instead of capping at 260px. */
@media (max-width: 1027px) {
    .filter-toolbar__event-type__list {
        max-height: none;
    }
}

/* Standalone picker shell (home hero "What's your event?"). The panel chrome lives here
   rather than in the hero's own styles so both places take their sizing from one file.
   Overrides .dropdown__box's 300px cap and its own scrollbar: the option list inside
   already scrolls, and a second scroller would trap the search box out of view. */
.event-type-picker__panel {
    width: 490px;
    max-width: calc(100vw - 2rem);
    max-height: none;
    overflow: visible;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.event-type-picker__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
}

.event-type-picker__title {
    font-family: Neue, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1A1A1A;
}

.event-type-picker__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    cursor: pointer;
}

@media (max-width: 1027px) {
    .event-type-picker__panel {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Home hero, mobile: the "What's your event?" field opens the
   event_type_modal_mobile sheet, which is a different component from the
   desktop picker above (the desktop hero search is hidden lg:flex). This
   dresses that sheet in the same chrome as the /venues toolbar event type
   panel so the two pages read as one design. Values are the mobile
   .filter-toolbar__chip-dropdown__* rules from filter-modal-spacing-fix.css:
   56px header, 14px/400 #262626 title, 40px round close, content at 0 16px.

   Not copied: the listing panel's Clear/Apply footer. This sheet is step 2 of
   the mobile Where -> Event type -> Attendees wizard and keeps its Next button.
   The option rows stay the combobox list the wizard reads selections from.
   --------------------------------------------------------------------------- */

/* Cap the sheet so the option list scrolls inside it instead of pushing Next past the
   bottom of the screen. The blade keeps min-h-[75vh] for a stable resting height. */
.event-type-sheet {
    max-height: 85vh;
    overflow: hidden;
}

/* The form is the flex parent of header/content/footer and a flex child of the sheet.
   Without min-height:0 it refuses to shrink below its content, the cap above does
   nothing, and Next gets pushed out of view — the content wrapper alone is not enough. */
.event-type-sheet > form {
    min-height: 0;
}

.event-type-sheet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
    min-height: 56px;
    padding: 16px 20px 12px;
    background: #FFF;
    border-radius: 20px 20px 0 0;
}

.event-type-sheet__title {
    font-family: 'Neue Plak', Neue, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 100%;
    color: #262626;
}

.event-type-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #4B5563;
    cursor: pointer;
    transition: background 0.2s ease;
}

.event-type-sheet__close:hover {
    background: rgb(0 0 0 / 5%);
}

/* Show the whole option list as soon as the sheet opens, like the /venues panel does.
   Left alone, `.autocomplete__results` is a desktop type-to-search flyout: absolutely
   positioned and `display:none` until you type, which in a 75vh sheet left a large
   blank area between the search box and Next. Taking it in-flow and permanently
   visible turns it into the listing panel's plain scrolling list.

   Two classes beats the `.hidden` utility (0,1,0) the combobox toggles, so no
   !important is needed, and the combobox still filters by hiding individual <li>s. */
.event-type-sheet .autocomplete__results {
    display: block;
    position: static;
    visibility: visible;
    opacity: 1;
    max-height: none;
    margin-top: 0;
    transform: none;
}

/* Now that the list is in-flow it is safe for this wrapper to scroll — the earlier
   worry about clipping only applied while the list was absolutely positioned. */
.event-type-sheet__content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Keeps the search box in place while the options scroll beneath it. */
.event-type-sheet .filter-toolbar__event-type__search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #FFF;
    padding-top: 4px;
}

/* margin-top:auto keeps Next pinned to the bottom, as mt-auto did on the button. */
.event-type-sheet__footer {
    flex: 0 0 auto;
    margin-top: auto;
    padding: 12px 16px 16px;
    background: #FFF;
}