/*
 * Route/stop lookup dropdown panel — the list route-stop-lookup.js opens under
 * its input, shared by every way of adding the lookup (the Elementor form
 * fields and the [ride_guide_lookup] shortcode).
 *
 * The dropdown panel is appended to <body> by the shared rg-combobox.js core
 * (see that file's own header for why), so it sits outside any page-builder
 * tree and isn't reachable by per-widget Design-tab controls — its look is
 * owned here as plain, site-wide CSS instead. Everything is namespaced
 * `.rg-*`, and colours/spacing/radius come from semantic-variables.css (which
 * itself defaults to the active theme's theme.json presets), so it follows the
 * host theme instead of fighting it. Deliberately independent from
 * address-lookup.css's `.places-autocomplete-*` classes — its own
 * `.rg-route-lookup-*` classes, not required to match byte-for-byte.
 */

.rg-route-lookup-panel {
    position: absolute;
    z-index: var(--z-dropdown);
    margin: 0;
    display: none;
    background: var(--background,#fff);
    border: var(--border-width) solid var(--border-color,#D6D5D5);
    border-radius: var(--field-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    font-size: var(--font-size-sm);
}
.rg-route-lookup-panel.is-open {
    display: block;
}

.rg-route-lookup-list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
}

.rg-route-lookup-option {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    cursor: pointer;
    line-height: 1.3;
    flex-wrap: wrap;
}
.rg-route-lookup-option.is-active,
.rg-route-lookup-option:hover {
    background: var(--ink-15);
}

.rg-route-lookup-option-title {
    flex: 1 1 auto;
}

.rg-route-lookup-option-meta {
    flex-basis: 100%;
    font-size: var(--font-size-xs);
    opacity: 0.65;
}

.rg-route-lookup-recent-tag {
    color: var(--ink-50);
    font-size: var(--font-size-xs);
}

/* Route number badge — background/color set inline per-route from
   route_color/route_text_color (REST.php), this just handles the chrome. */
:where(.rg-route-badge) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    padding: 0.15em var(--space-xs);
    border-radius: 3px;
    background: #555; /* fallback when a route has no configured color */
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.4;
}

.rg-route-lookup-clear-row {
    display: none;
    border-top: var(--border-width) solid var(--border-color,#e5e5e5);
    text-align: right;
    padding: var(--space-3xs) var(--space-2xs);
}
.rg-route-lookup-clear-row.is-visible {
    display: block;
}

.rg-route-lookup-clear-button {
    background: none;
    border: 0;
    padding: var(--space-3xs) var(--space-2xs);
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--ink-50);
    text-decoration: underline;
    cursor: pointer;
}
.rg-route-lookup-clear-button:hover {
    color: var(--brand-primary);
    background-color: unset;
}

/* Shortcode / Classic Editor markup — see app/Lookup.php. The input itself is
   left to the active theme's own text-input styling; only its width and its
   (optional) visible label are set here. */
.rg-lookup {
    position: relative;
    max-width: 100%;
}
.rg-lookup-label {
    display: block;
    margin-bottom: var(--space-3xs);
}
.rg-lookup-input {
    width: 100%;
    box-sizing: border-box;
}