/*
 * The type-to-find box over a long menu.
 *
 * Sized and spaced to match the form controls around it, so the three enhanced
 * fields do not read as a different kind of field from the ones above them.
 */

.nzeru-ss {
    position: relative;
    width: 100%;
}

/*
 * The original <select>, kept and submitted, simply not on screen.
 *
 * NOT `display: none`. A control with no box is skipped by some browsers when
 * they run their own "required" check, and Country is required -- the form
 * would submit empty with no message. Clipping it to nothing leaves it a real,
 * validatable control that happens to be invisible.
 */
.nzeru-ss__source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/*
 * `.nzeru-ss .nzeru-ss__input` rather than the single class, and a couple of
 * declarations forced.
 *
 * The sign-up dialog and the profile form both style their own inputs, and both
 * of those rules are more specific than one class -- so the search icon was
 * painted over and the size came out at 14.5px. The size is not cosmetic: below
 * 16px, iOS zooms the page the moment the box is focused, and the reader has to
 * pinch back out to read the list they just opened. That is the one thing this
 * field exists to avoid, so it wins.
 */
.nzeru-ss .nzeru-ss__input {
    width: 100%;
    font-size: 16px !important;
    background-image: 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='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 38px;
}

.nzeru-ss__list {
    position: absolute;
    z-index: 1060;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 4px;
    list-style: none;
    /*
     * BACKGROUND AND TEXT COLOUR ARE BOTH STATED, AND NEITHER FOLLOWS THE
     * DEVICE'S THEME.
     *
     * This panel used to carry a `prefers-color-scheme: dark` block, so on a
     * phone set to dark mode it painted itself dark grey -- while the form
     * around it, which does not answer to the OS theme, stayed white. The item
     * text inherited the page's near-black navy, and the result was dark navy
     * on dark grey: a list you could not read.
     *
     * A component cannot opt into dark mode on its own. It belongs to the card
     * it drops out of, so it is painted to match that card and nothing else. The
     * colour is set here rather than inherited for the same reason: whatever the
     * host page sets on its own text must not decide whether this is legible.
     */
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, .16);
    border-radius: 10px;
    box-shadow: 0 16px 36px -18px rgba(15, 23, 42, .45);
}

.nzeru-ss__item {
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.35;
    color: #0f172a;
}

.nzeru-ss__item.is-active,
.nzeru-ss__item:hover {
    background: rgba(37, 99, 235, .10);
}

.nzeru-ss__item[aria-selected="true"] {
    font-weight: 600;
}

.nzeru-ss__empty {
    padding: 10px 12px;
    color: #6b7280;
    font-size: 14px;
}

/*
 * On a phone the list is the thing being used, so it gets the room: anchored to
 * the bottom of the screen and half its height, rather than a 260px panel that
 * the on-screen keyboard covers.
 */
@media (max-width: 575.98px) {
    .nzeru-ss__list {
        max-height: 50vh;
    }

    .nzeru-ss__item {
        padding: 12px;
        /* A comfortable touch target rather than a line of text. */
        min-height: 44px;
    }
}