/* ================================================================
   search-select.css - Search panel of a searchable <select>
   (search-select.js). The select itself keeps its own look;
   pointer-events: none only stops it opening its native list, so a
   click or tap on it opens this panel instead. Colours come from the
   theme variables in layout.css.
   ================================================================ */

.search-select {
    pointer-events: none;
}

.search-select-panel {
    position: absolute;
    z-index: 1000;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
    color: var(--tx-primary);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.search-select-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-base);
    color: var(--tx-primary);
    font-size: 1rem; /* at least 16px, so iOS does not zoom in when it is focused */
}

.search-select-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-select-list {
    position: relative; /* the options' offsetTop is measured from the list */
    max-height: 240px;
    margin: 6px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.search-select-option {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.search-select-option.is-active {
    background: var(--bg-hover);
}

.search-select-option[aria-selected="true"] {
    color: var(--accent);
    font-weight: 600;
}

.search-select-option[aria-disabled="true"] {
    color: var(--tx-muted);
    cursor: default;
}

.search-select-empty {
    padding: 7px 10px;
    color: var(--tx-muted);
}